<template>
  <div>
    <h3>购物车列表</h3>
    <ul>
        <li v-for="car in carList" :key="car.id" :style="{boder:'1px solid red'}">
            <p>商品名称:{{car.gname}}</p>
            <p>商品价格: {{car.price}}</p>
            <p><button @click="changeNum(car.id,-1)">-</button> {{car.buyNum}} <button @click="changeNum(car.id, 1)">+</button></p>
        </li>
        
    </ul>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name:'CarList',
    computed:{
        ...mapState('car', ['carList'])
    },
    methods:{
        changeNum(id, buyNum){
            this.$store.dispatch('car/changeNum', {id, buyNum})
        }
    }
}
</script>

<style>

</style>